<template>
    <div class="layout-wrap">
        <div class="title">
            <div class="title-label">
                <span class="title-label-text">数据概览</span>
                <el-tooltip effect="dark" popper-class="group-statistics-desc-tootip" placement="top-start">
                    <template #content>
                        <browse-tootip-desc />
                    </template>
                    <span class="title-label-text-icon">
                        <el-icon color="#ccc" size="16"><QuestionFilled /></el-icon>
                    </span>
                </el-tooltip>
            </div>
            <div class="more" @click="onSelectColumn">
                <span>更多数据</span>
                <el-icon size="14" color="#969696"><ArrowRightBold /></el-icon>
            </div>
        </div>
        <div class="layout">
            <div v-for="item in props.basicInfo" :key="item.field_key" class="population">
                <p class="population_title zw-text-ellipsis">{{ item.field_name }}</p>
                <p class="population_num">
                    <render-colunm-number :num="item.field_val" :unit="item.unit" />
                </p>
                <p v-if="item.today || item.today === 0" class="population_add zw-text-ellipsis">
                    今日新增：{{ item.today }}
                </p>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import BrowseTootipDesc from './browse-tootip-desc.vue';
import RenderColunmNumber from '@/components/zw/select-colunm-dialog/render-colunm-number.vue';
const props = withDefaults(
    defineProps<{
        basicInfo: Array<any>;
    }>(),
    {
        basicInfo: () => []
    }
);

const emit = defineEmits<{
    (e: 'select-column'): void;
}>();

/**
 * 打开数据概览配置列弹窗
 */
const onSelectColumn = () => {
    emit('select-column');
};
</script>

<style lang="scss" scoped>
@import './browse';

:global(.group-statistics-desc-tootip) {
    max-width: none;
}
</style>
